<template>
  <div class="store-shelf">
    <!-- 标题 -->
    <shelf-title
      :title="shelfCategory.title"
    ></shelf-title>
    <scroll class="store-shelf-scroll-wrapper"
            @onScroll="onScroll"
            :top="0"
            :bottom="scrollBottom"
            ref="scroll"
            v-if="ifShowList">
      <!-- 分类列表 -->
      <shelf-list :top="42" :data="shelfCategory.itemList"></shelf-list>
    </scroll>
    <!-- 如果列表为空-->
    <div class="store-shelf-empty-view" v-else>
      {{$t('shelf.groupNone')}}
    </div>
    <shelf-footer></shelf-footer>
  </div>
</template>

<script>
import ShelfTitle from '../../components/shelf/ShelfTitle'
import Scroll from '../../components/common/Scroll'
import ShelfList from '../../components/shelf/ShelfList'
import ShelfFooter from '../../components/shelf/ShelfFooter'
import { storeShelfMixin } from '../../utils/mixin'
export default {
  name: 'StoreCategory',
  components: { ShelfFooter, ShelfList, Scroll, ShelfTitle },
  mixins: [storeShelfMixin],
  watch: {
    isEditMode (isEditMode) {
      this.scrollBottom = isEditMode ? 48 : 0
      this.$nextTick(() => {
        this.$refs.scroll.refresh() // 由于会有Dom操作，所以不能立即刷新
      })
    }
  },
  computed: {
    ifShowList () {
      return this.shelfCategory.itemList && this.shelfCategory.itemList.length > 0
    }
  },
  data () {
    return {
      scrollBottom: 0
    }
  },
  methods: {
    onScroll (offsetY) {
      this.setOffsetY(offsetY)
    }
  },
  mounted () {
    this.getCategoryList(this.$route.query.title)
    this.setCurrentType(2)
  }
}
</script>

<style lang="stylus" scoped>
  @import '../../assets/styles/global.styl'
  .store-shelf
    position: relative
    z-index: 100
    width: 100%
    height: 100%
    background: white
    .store-shelf-scroll-wrapper
      position: absolute
      top: 0
      left: 0
      z-index: 101
    .store-shelf-empty-view
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100%
      font-size: px2rem(14)
      color: #333
      center()
</style>
